<template>
  <div class="EchartPractice">
    <div id="main"></div>
    <div id="main2"></div>
  </div>
</template>

<script>
import "@/assets/theme/purple-passion.js"
export default {
  name: 'Dashboard',
  data() {
    return {
      category: [],
      // 文章的生产月份
      months:[],
      // 文章的月产量
      counts:[]
    }
  },
  watch: {
    category: {
      handler(newVal, oldVal) {
        // this.cate = newVal //newVal即是chartData
        // console.log('新值', newVal)
        this.drawChartCircle(newVal)
        
      },
    },
    months:function(newVal,oldVal){
      this.drawChart(newVal,this.counts)
    }
  },
  created() {
    this.getCategory()
    this.getMonthOut()
  },
  methods: {
    // 获取每个类别下的文章数量
    getCategory() {
      this.$http.get('/cate').then((data) => {
        // console.log(data)
        const { code, message, result } = data
        if (code == 0) {
          this.category = result
          return
        }
      })
    },
    // 获取文章月产量
    getMonthOut(){
      this.$http.get('/cate/output').then(data => {
        const {code,message,result} = data
        if(code == 0){
          // js提取对象数组中的某一个属性组成新数组 的一种方法
          result.forEach(item => {
            this.months.push(item.month)
            this.counts.push(item.count)
          })
        }
      })
    },
    // 绘制条状图
    drawChart(m,c) {
      let myEchart = this.$echarts.init(document.getElementById('main2'))
      let option = {
        title: {
          text: '文章月产量',
          left:'center'
        },
        tooltip: {},
        legend: {
          data: ['文章月产量'],
        },
        xAxis: {
          data: m,
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: c,
          },
        ],
      }
      myEchart.setOption(option)
    },
    // 绘制饼状图
    drawChartCircle(cate) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'),'purple-passion')
      // 指定图表的配置项和数据
      var option = {
        // legend: {
        //   top: '5%',
        //   right:'10%',
        //   orient: 'vertical',
        //   left: 'right'
        // },
        series: [
          {
            name: '访问来源',
            title:{text:'文章分类'},
            type: 'pie',
            itemStyle:{ 
                normal:{ 
                  label:{ 
                    show: true, 
                    formatter: '{b} : {c} ({d}%)' 
                  }, 
                  labelLine :{show:true} 
                } 
            },
            radius: ['30%', '60%'],
            // roseType: 'angle',
            data: cate,
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      // console.log(cate)
      // console.log(option.series[0].data)
    },
  },
}
</script>

<style scoped>
.EchartPractice {
  display: flex;
}
#main {
  width: 600px;
  height: 400px;
  margin: auto;
  margin-top: 100px;
}
#main2 {
  width: 400px;
  height: 400px;
  margin: auto;
  margin-top: 100px;
}
</style>
